<template>
    <div>
        <a-button @click="handClick" :type="this.type == 'add' ? 'primary' : 'default'"
            v-if="['新增', '批量修改'].includes(title)">{{ title }}</a-button>
        <template v-else-if="title == '编辑'">
            <a-tooltip :title="title">
                <a-button @click="handClick" type="link" size="small">
                    <span v-if="ids">
                        <Icons type="edit"></Icons>
                    </span>
                </a-button>
            </a-tooltip>
        </template>
        <template v-else-if="title == '节点'">
            <a-tooltip :title="title">
                <a-button @click="handClick" type="link" size="small">
                    <span v-if="ids">
                        <Icons type="branches"></Icons>
                    </span>
                </a-button>
            </a-tooltip>
        </template>
        <!-- 节点 -->
        <a-drawer :title="`${record.title}【权限设置】`" width="50vw" placement="right" :visible="visible" @close="onClose"
            v-if="record && Object.keys(record).length > 0">
            <div class="drawContWrap">
                <a-spin :spinning="getLoading" class="spinWrap">
                    <table class="tableWrap">
                        <thead class="theadWrap">
                            <tr class="trWrap">
                                <th class="name">表单字段</th>
                                <th class="options">
                                    <div class="radioGroupWrap">
                                        <div class="itemRadio">
                                            <span>可编辑</span>
                                            <!-- <a-radio @click="handRadioClick(1)"
                                                :checked="opRadio == 'canEdit'">可编辑</a-radio> -->
                                        </div>
                                        <div class="itemRadio">
                                            <span>只读</span>
                                            <!-- <a-radio @click="handRadioClick(2)"
                                                :checked="opRadio == 'canRead'">只读</a-radio> -->
                                        </div>
                                        <div class="itemRadio">
                                            <span>隐藏</span>
                                            <!-- <a-radio @click="handRadioClick(3)"
                                                :checked="opRadio == 'canHidden'">隐藏</a-radio> -->
                                        </div>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="tbodyWrap">
                            <tr class="trWrap" v-for="item in list" :key="item.id">
                                <td class="name">{{ item.label }}</td>
                                <th class="options">
                                    <a-radio-group v-model="item.permission" class="radioGroupWrap">
                                        <div class="itemRadio">
                                            <a-radio :value="1"></a-radio>
                                        </div>
                                        <div class="itemRadio">
                                            <a-radio :value="2"></a-radio>
                                        </div>
                                        <div class="itemRadio">
                                            <a-radio :value="3"></a-radio>
                                        </div>
                                    </a-radio-group>
                                </th>
                            </tr>
                        </tbody>
                    </table>
                </a-spin>
            </div>
            <div :style="{
                position: 'absolute',
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e8e8e8',
                padding: '10px 16px',
                textAlign: 'right',
                left: 0,
                background: '#fff',
                borderRadius: '0 0 4px 4px',
            }">
                <a-space>
                    <a-button @click="onClose"> 取消 </a-button>
                    <a-button type="primary" @click="onClickSave" :loading="btnLoading">
                        保存
                    </a-button>
                </a-space>
            </div>
        </a-drawer>
    </div>
</template>
<script>
import Icons from '../Icons.vue';
export default {
    name: 'Edit',
    components: {
        Icons
    },
    props: {
        ids: {
            type: [String, Number],
        },
        type: {
            type: String,
            default: '',
        },
        parendId: {
            type: [String, Number],
        },
        record: {
            type: [Object],
        },
        onCallBack: {
            type: Object,
        }
    },
    data() {
        return {
            visible: false,
            btnLoading: false,
            getLoading: false,
            oldList: [],
            list: [],
        }
    },
    methods: {
        handClick() {
            this.visible = true;
            this.getList();
        },
        onClose() {
            if (JSON.stringify(this.oldList) == JSON.stringify(this.list)) {
                this.visible = false;
            } else {
                this.$confirm({
                    title: "提示信息",
                    content: "当前页面数据未保存，确定退出吗？",
                    cancelText: "取消",
                    okText: "确定",
                    onOk: () => {
                        this.visible = false;
                    },
                    onCancel: () => { },
                    class: "test",
                });
            }
        },
        // 保存
        onClickSave() {
            let list = this.list;
            let paramList = list.map((val) => {
                return {
                    middleId: val.middleId,
                    permission: val.permission,
                }
            })
            let params = {
                paramList: paramList
            };
            this.btnLoading = true;
            this.postAxios(this.$permissionModify, params)
                .then((res) => {
                    if (res.code == 200) {
                        let data = res.data;
                        this.$message.success({
                            content: data,
                            duration: 2.5,
                        });
                        if (this.onCallBack && typeof (this.onCallBack.onRefresh) == 'function') {
                            this.onCallBack.onRefresh();
                        }
                        this.visible = false;
                    }
                }).finally(() => {
                    this.btnLoading = false;
                })
        },
        getList() {
            let params = {
                processNodeId: this.record.id,
            };
            this.getLoading = true;
            this.getAxios(this.$listComponent, params)
                .then((res) => {
                    let data = res.data;
                    // {
                    //     // 测试
                    //     data = data.concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data)
                    // }
                    this.list = data;
                    this.oldList = JSON.parse(JSON.stringify(data));
                }).finally(() => {
                    this.getLoading = false;
                })
        },
        handRadioClick(type) {
            let l = this.list;
            l = l.map(val => {
                return {
                    ...val,
                    permission: type
                }
            })
            this.list = l;
        }
    },
    computed: {
        title() {
            let str = '';
            switch (this.type) {
                case 'edit':
                    str = '编辑';
                    break;
                case 'add':
                    str = '新增';
                    break;
                case 'change':
                    str = '节点';
                    break;
                case 'allChange':
                    str = '批量修改';
                    break;
                default:
                    break;
            }
            return str;
        },
        opRadio() {
            let str = '';
            let a = 0, b = 0, c = 0;
            let l = this.list;
            l.filter(val => {
                if (val.permission == 1) {
                    a += 1;
                } else if (val.permission == 2) {
                    b += 1;
                } else if (val.permission == 3) {
                    c += 1;
                }
            })
            if (a == l.length) {
                str = 'canEdit'
            } else if (b == l.length) {
                str = 'canRead';
            } else if (c == l.length) {
                str = 'canHidden';
            }
            return str;
        }
    }
}
</script>
<style lang="less" scoped>
::v-deep {
    .ant-drawer-body {
        padding: 8px 12px;
    }
}

.drawContWrap {
    height: calc(100vh - 55px - 53px - 16px);
    overflow-x: hidden;
    overflow-y: auto;

    .spinWrap {
        width: 100%;
        height: 100%;

        .tableWrap {
            .name {
                width: 22vw;
                padding: 0px 10px;
            }

            .options {
                width: 33vw;
                text-align: left;
                padding: 0px 10px;

                .radioGroupWrap {
                    display: flex;

                    .itemRadio {
                        width: 11vw;
                        min-width: 120px;
                        text-align: center;
                    }
                }
            }

            .theadWrap {
                position: sticky;
                top: 0px;

                .trWrap {
                    height: 54px;
                    background: #F6F6F6;

                    .radioGroupWrap {
                        position: relative;
                        z-index: 1;
                    }
                }
            }

            .tbodyWrap {
                .trWrap {
                    height: 46px;

                    .radioGroupWrap {
                        ::v-deep {
                            .ant-radio {
                                position: relative;
                                z-index: -1;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>